<template>
  <a-affix :offsetTop="100">
    <a-anchor @change="select" @click="select2" ref="anchorRef" line-less>
      <a-anchor-link
        v-for="item in props.list"
        :key="item.id"
        :href="'#anchor' + item.id"
      >
        {{ item.groupName }}
      </a-anchor-link>
      <!-- <a-anchor-link href="#affix">
      Affix
      <template #sublist>
        <a-anchor-link href="#boundary">Scroll Boundary</a-anchor-link>
        <a-anchor-link href="#hash">Hash mode</a-anchor-link>
      </template>
    </a-anchor-link> -->
    </a-anchor>
  </a-affix>
</template>
<script setup lang="ts">
import { ref } from 'vue';

const props = withDefaults(
  defineProps<{
    list: any[];
  }>(),
  {}
);
const anchorRef = ref();
const select = (e) => {
  console.log(e, anchorRef.value.anchorRef);
  // e.preventDefault();
  // anchorRef.value.scrollContainer = e;
};
const select2 = (e) => {
  e.preventDefault();
  // anchorRef.value.scrollContainer = e;
};
</script>
